<template>
  <div id="app">
    <section class="container user-select">
      <header>
        <div class="hidden-xs header">
          <!--超小屏幕不显示-->
          <h1 class="logo">
            <a href="/" title="个人技术博客"></a>
          </h1>
          <ul class="nav hidden-xs-nav">
            <li class="active">
              <router-link to="/">
                <span class="glyphicon glyphicon-home"></span>网站首页
              </router-link>
            </li>
            <li>
              <a href="https://gitee.com/ZhoulIMayun/blog_vue" target="_blank">
                <span class="glyphicon glyphicon-erase"></span>本站开源
              </a>
            </li>
            <li>
              <a href="/home/about">
                <span class="glyphicon glyphicon-user"></span>关于本站
              </a>
            </li>
            <li>
              <router-link to="/home/friendly">
                <span class="glyphicon glyphicon-tags"></span>友情链接
              </router-link>
            </li>
          </ul>
          <div class="feeds">
            <a class="feed feed-xlweibo" href="https://gitee.com/zhoulimayun/" target="_blank">
              <i></i>码云
            </a>
            <a class="feed feed-txweibo" href="https://github.com/zl2962" target="_blank">
              <i></i>Gihub
            </a>
            <a
              class="feed feed-rss"
              title="点击添加我为好友"
              href="tencent://AddContact/?fromId=45&fromSubId=1&subcmd=all&uin=1021907330&website=www.oicqzone.com"
              target="_blank"
            >
              <i></i>QQ
            </a>
            <a
              class="feed feed-weixin"
              data-toggle="popover"
              data-trigger="hover"
              title="微信扫一扫"
              data-html="true"
              :data-content="wxImg"
              href="javascript:;"
              target="_blank"
            >

              <i></i>关注微信
            </a>
          </div>
          <div class="wall">
            <a href="/home/tags" target="_blank">标签云</a>
          </div>
        </div>
        <!--/超小屏幕不显示-->
        <div class="visible-xs header-xs">
          <!--超小屏幕可见-->
          <div class="navbar-header header-xs-logo">
            <button
              type="button"
              class="navbar-toggle collapsed"
              data-toggle="collapse"
              data-target="#header-xs-menu"
              aria-expanded="false"
              aria-controls="navbar"
            >
              <span class="glyphicon glyphicon-menu-hamburger"></span>
            </button>
          </div>
          <div id="header-xs-menu" class="navbar-collapse collapse">
            <ul class="nav navbar-nav header-xs-nav">
              <li class="active">
                <router-link to="/">
                  <span class="glyphicon glyphicon-home"></span>网站首页
                </router-link>
              </li>
              <li>
                <a href="https://gitee.com/ZhoulIMayun/blog_vue" target="_blank">
                  <span class="glyphicon glyphicon-erase"></span>本站开源
                </a>
              </li>
              <li>
                <a href="/home/about">
                <span class="glyphicon glyphicon-user"></span>关于本站
              </a>
              </li>
              <li>
                <router-link to="/home/friendly">
                  <span class="glyphicon glyphicon-tags"></span>友情链接
                </router-link>
              </li>
            </ul>
            <div class="navbar-form" style="padding:0 25px;">
              <div class="input-group">
                <input
                  type="text"
                  class="form-control"
                  v-model="strSearch"
                  @keyup.enter="search"
                  placeholder="请输入关键字"
                />
                <span class="input-group-btn">
                  <button class="btn btn-default btn-search" type="button" @click="search">搜索</button>
                </span>
              </div>
            </div>
          </div>
        </div>
      </header>
      <!--/超小屏幕可见-->
      <div class="content-wrap">
        <!--内容-->
        <div class="content" style="-webkit-user-select: text">
          <!-- 路由出口 -->
          <!-- 路由匹配到的组件将渲染在这里 -->
          <router-view :key="key"></router-view>
        </div>
      </div>
      <!--/内容-->
      <aside class="sidebar visible-lg">
        <!--右侧>992px显示-->
        <div class="sentence">
          <!--每日一句-->
          <mryj></mryj>
        </div>
        <div id="search" class="sidebar-block search" role="search">
          <h2 class="title">
            <strong>搜索文章</strong>
          </h2>
          <div class="navbar-form">
            <div class="input-group">
              <input
                type="text"
                class="form-control"
                v-model="strSearch"
                @keyup.enter="search"
                size="35"
                placeholder="请输入关键字"
              />
              <span class="input-group-btn">
                <button class="btn btn-default btn-search" type="button" @click="search">搜索</button>
              </span>
            </div>
          </div>
        </div>
         <!--右下-->
          <bottomright></bottomright>
      </aside>
      <!--/右侧>992px显示-->
      <footer class="footer">
        POWERED BY .NET CORE &copy;
        <a href="/">周黎个人技术博客 </a>
        <a href="http://icp.chinaz.com/www.zhouli.info">渝ICP备18004724号-1</a>
        <span style="display:none">
          <a href="http://seo.chinaz.com/www.zhouli.info">网站SEO查询</a>
        </span>
      </footer>
    </section>
    <div>
      <a href="javascript:;" class="gotop" style="display:none;"></a>
    </div>
  </div>
</template>

<script>
import './assets/css/bootstrap.min.css'
import './assets/css/style.css'

import './assets/js/jquery-2.1.4.min.js'
import './assets/js/bootstrap.min.js'
import './assets/js/home.js'
import mryj from './components/mryj'
import bottomright from './components/bottomright'
// import {initwebStieStatistics} from './assets/js/webstiestatistics.js'

export default {
  name: 'App',
  components: { mryj, bottomright },
  data () {
    return {
      wxImgSrc: require('./assets/images/weixin.png'),
      strSearch: '',
      // 热门文章
      popularArticle: []
    }
  },
  computed: {
    key () {
      return this.$route.path + Math.random()
    },
    wxImg () {
      return '<img src=' + this.wxImgSrc + ' style="width:200px" />'
    }
  },
  created () {
    // console.log(this.$store.state.token)
  },
  mounted () {
    // initwebStieStatistics()
  },
  methods: {
    search () {
      // 搜索功能
      this.$router.push({
        path: '/search',
        query: { key: this.strSearch }
      })
    }
  }
}
</script>

<style>
</style>
